<html>

<head>
    <meta charset="utf-8">
    <title>rrr</title>
    <!-- <script src="../position_array.js"></script> -->
    <script src="../position3_array.js"></script>
    <style>
        body,
        html {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <script>
        

        var poiBoard = function (posName, posDistance) {
            var icon = new Image();
            icon.src = "";
            // icon.id="icon";
            // document.body.appendChild(icon);
            var canvas = document.createElement('canvas');
            canvas.width = 1024;
            canvas.height = 256;
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = "rgba(0,0,0,0.75)";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            // ctx.fillRect(50, 60, 206, 206);
            icon.addEventListener('load', function (e) {
                ctx.drawImage(icon, 40, 40, 176, 176);
            });

            ctx.moveTo(256, 33);
            ctx.lineTo(256, 222);
            ctx.strokeStyle = "#00ce00";
            ctx.lineWidth = 7;
            ctx.stroke();

            ctx.fillStyle = "#ffffff";
            ctx.font = '54px sans-serif';
            ctx.fillText(posName, 300, 110);

            ctx.fillStyle = "#ffffff";
            ctx.font = '36px sans-serif';
            ctx.fillText(posDistance, 300, 180);

            return canvas;
        }

        for (var i = 0; i < positions.length; i++) {
            if(positions[i].title.length>12){
                var finalTitle=positions[i].title.slice(0,12)+'...';
            }
            else{
                var finalTitle=positions[i].title;
            }
            document.body.appendChild(poiBoard(finalTitle, positions[i].province));
        }
    </script>
</body>

</html>